<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>${channel.title} - ${site.title}</title>
  <meta name="keywords" content="${channel.seoKeywords}">
  <meta name="description" content="${channel.seoDescription}">
  <meta name="_csrf" content="${_csrf.token}"/>
  <meta name="_csrf_header" content="${_csrf.headerName}"/>
  [#include 'inc_meta.html'/]
  [#include 'inc_css.html'/]
  [#include 'inc_js.html'/]
  [#if config.greyStyle]
    <style>
      body {
        filter: grayscale(.95);
        -webkit-filter: grayscale(.95);
      }
    </style>
  [/#if]
</head>
<body>
[#include 'inc_header.html'/]

<div class="container mt-3">
  <div class="row">
    <div class="col-lg-8">
      <!-- 图书荐购 -->
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0"><i class="fas fa-book-medical"></i> 图书荐购</h5>
          <button type="button" class="btn btn-primary" onclick="showRecommendModal()">
            <i class="fas fa-plus"></i> 推荐图书
          </button>
        </div>
        <div class="card-body">
          <!-- 荐购统计 -->
          <div class="row text-center mb-4">
            <div class="col-md-3">
              <div class="card">
                <div class="card-body text-center">
                  <h4 class="text-primary">15</h4>
                  <small class="text-muted">总荐购数</small>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="card">
                <div class="card-body text-center">
                  <h4 class="text-success">8</h4>
                  <small class="text-muted">已采纳</small>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="card">
                <div class="card-body text-center">
                  <h4 class="text-info">3</h4>
                  <small class="text-muted">采购中</small>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="card">
                <div class="card-body text-center">
                  <h4 class="text-warning">53%</h4>
                  <small class="text-muted">成功率</small>
                </div>
              </div>
            </div>
          </div>

          <!-- 荐购列表 -->
          <div class="table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>图书信息</th>
                  <th>推荐时间</th>
                  <th>状态</th>
                  <th>进度</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="recommendList">
                <!-- 动态生成的荐购列表 -->
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 读者反馈 -->
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0"><i class="fas fa-comment-dots"></i> 读者反馈</h5>
          <button type="button" class="btn btn-success" onclick="showFeedbackModal()">
            <i class="fas fa-plus"></i> 提交反馈
          </button>
        </div>
        <div class="card-body">
          <div class="row mb-3">
            <div class="col-md-3">
              <div class="card text-center">
                <div class="card-body">
                  <i class="fas fa-service-cart fa-2x text-primary mb-2"></i>
                  <h6>服务质量</h6>
                  <div class="badge badge-primary">5</div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="card text-center">
                <div class="card-body">
                  <i class="fas fa-home fa-2x text-success mb-2"></i>
                  <h6>设施环境</h6>
                  <div class="badge badge-success">3</div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="card text-center">
                <div class="card-body">
                  <i class="fas fa-database fa-2x text-info mb-2"></i>
                  <h6>资源建设</h6>
                  <div class="badge badge-info">7</div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="card text-center">
                <div class="card-body">
                  <i class="fas fa-desktop fa-2x text-warning mb-2"></i>
                  <h6>系统功能</h6>
                  <div class="badge badge-warning">2</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 反馈列表 -->
          <div class="list-group" id="feedbackList">
            <!-- 动态生成的反馈列表 -->
          </div>
        </div>
      </div>

      <!-- 在线咨询 -->
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0"><i class="fas fa-headset"></i> 在线咨询</h5>
          <button type="button" class="btn btn-info" onclick="startConsultation()">
            <i class="fas fa-comments"></i> 开始咨询
          </button>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <div class="card text-center">
                <div class="card-body">
                  <i class="fas fa-phone fa-2x text-success mb-2"></i>
                  <h6>电话咨询</h6>
                  <p class="text-muted small">020-87654321</p>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card text-center">
                <div class="card-body">
                  <i class="fas fa-envelope fa-2x text-info mb-2"></i>
                  <h6>邮件咨询</h6>
                  <p class="text-muted small">library@edu.cn</p>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card text-center">
                <div class="card-body">
                  <i class="fas fa-comments fa-2x text-primary mb-2"></i>
                  <h6>文字咨询</h6>
                  <p class="text-muted small">在线客服</p>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card text-center">
                <div class="card-body">
                  <i class="fas fa-question-circle fa-2x text-warning mb-2"></i>
                  <h6>常见问题</h6>
                  <p class="text-muted small">FAQ查看</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 咨询历史 -->
          <div class="mt-3">
            <h6>最近咨询记录</h6>
            <div class="list-group" id="consultationList">
              <!-- 动态生成的咨询记录 -->
            </div>
          </div>
        </div>
      </div>

      <!-- 活动报名 -->
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0"><i class="fas fa-calendar-check"></i> 读书活动报名</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-6 mb-3">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start">
                    <div>
                      <h6 class="mb-1">读书分享会</h6>
                      <p class="text-muted small mb-2">与知名作家面对面交流读书心得</p>
                      <div class="text-muted small">
                        <i class="fas fa-calendar-alt"></i> 2024-04-25 14:00<br>
                        <i class="fas fa-map-marker-alt"></i> 图书馆报告厅
                      </div>
                    </div>
                    <span class="badge badge-success">报名中</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start">
                    <div>
                      <h6 class="mb-1">文献检索培训</h6>
                      <p class="text-muted small mb-2">学习高效的文献检索方法和技巧</p>
                      <div class="text-muted small">
                        <i class="fas fa-calendar-alt"></i> 2024-04-28 10:00<br>
                        <i class="fas fa-map-marker-alt"></i> 电子阅览室
                      </div>
                    </div>
                    <span class="badge badge-warning">名额已满</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="text-center mt-3">
            <button type="button" class="btn btn-primary" onclick="showAllActivities()">
              查看所有活动
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="col-lg-4 d-none d-lg-block">
      <!-- 荐购成功案例 -->
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0"><i class="fas fa-trophy"></i> 荐购成功案例</h5>
        </div>
        <div class="card-body">
          <div class="list-group list-group-flush">
            <div class="list-group-item">
              <div class="d-flex justify-content-between">
                <span>《深度学习》</span>
                <span class="badge badge-success">已到馆</span>
              </div>
              <small class="text-muted">推荐者：张同学，到馆时间：3天前</small>
            </div>
            <div class="list-group-item">
              <div class="d-flex justify-content-between">
                <span>《算法导论》</span>
                <span class="badge badge-success">已到馆</span>
              </div>
              <small class="text-muted">推荐者：李同学，到馆时间：1周前</small>
            </div>
            <div class="list-group-item">
              <div class="d-flex justify-content-between">
                <span>《机器学习实战》</span>
                <span class="badge badge-primary">采购中</span>
              </div>
              <small class="text-muted">推荐者：王同学，预计到馆：5天后</small>
            </div>
          </div>
        </div>
      </div>

      <!-- 荐购排行榜 -->
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0"><i class="fas fa-medal"></i> 荐购排行榜</h5>
        </div>
        <div class="card-body">
          <div class="list-group list-group-flush">
            <div class="list-group-item d-flex justify-content-between align-items-center">
              <div class="d-flex align-items-center">
                <span class="badge badge-warning mr-2">1</span>
                <span>计算机学院</span>
              </div>
              <span class="badge badge-primary badge-pill">28本</span>
            </div>
            <div class="list-group-item d-flex justify-content-between align-items-center">
              <div class="d-flex align-items-center">
                <span class="badge badge-secondary mr-2">2</span>
                <span>电子信息学院</span>
              </div>
              <span class="badge badge-primary badge-pill">23本</span>
            </div>
            <div class="list-group-item d-flex justify-content-between align-items-center">
              <div class="d-flex align-items-center">
                <span class="badge badge-danger mr-2">3</span>
                <span>外国语学院</span>
              </div>
              <span class="badge badge-primary badge-pill">18本</span>
            </div>
            <div class="list-group-item d-flex justify-content-between align-items-center">
              <div class="d-flex align-items-center">
                <span class="badge badge-info mr-2">4</span>
                <span>机械工程学院</span>
              </div>
              <span class="badge badge-primary badge-pill">15本</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 智能问答 -->
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0"><i class="fas fa-robot"></i> 智能问答</h5>
        </div>
        <div class="card-body">
          <div class="form-group">
            <input type="text" class="form-control" id="questionInput" placeholder="输入您的问题...">
          </div>
          <div class="text-center">
            <button type="button" class="btn btn-primary" onclick="askQuestion()">
              <i class="fas fa-paper-plane"></i> 提问
            </button>
          </div>
          <div class="mt-3">
            <small class="text-muted">常见问题：</small>
            <div class="list-group list-group-flush">
              <a href="#" class="list-group-item list-group-item-action small">如何续借图书？</a>
              <a href="#" class="list-group-item list-group-item-action small">如何预约座位？</a>
              <a href="#" class="list-group-item list-group-item-action small">忘记密码怎么办？</a>
              <a href="#" class="list-group-item list-group-item-action small">如何荐购图书？</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 图书荐购模态框 -->
<div class="modal fade" id="recommendModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">推荐图书购买</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="recommendForm">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="bookTitle">书名 <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="bookTitle" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="bookAuthor">作者/译者 <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="bookAuthor" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="publisher">出版社 <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="publisher" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="isbn">ISBN/ISSN号</label>
                <input type="text" class="form-control" id="isbn" placeholder="推荐填写">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="publishYear">出版年份</label>
                <input type="number" class="form-control" id="publishYear" min="1900" max="${.now?string('yyyy')}">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="category">图书类别 <span class="text-danger">*</span></label>
                <select class="form-control" id="category" required>
                  <option value="">请选择类别</option>
                  <option value="computer">计算机科学</option>
                  <option value="literature">文学</option>
                  <option value="science">自然科学</option>
                  <option value="social">社会科学</option>
                  <option value="engineering">工程技术</option>
                </select>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group">
                <label for="reason">推荐理由 <span class="text-danger">*</span></label>
                <textarea class="form-control" id="reason" rows="4" placeholder="请详细说明推荐理由，不少于20字" required></textarea>
                <small class="form-text text-muted">推荐理由应充分说明该图书的价值和需求程度</small>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="expectedDate">期望到馆时间</label>
                <input type="date" class="form-control" id="expectedDate">
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="submitRecommendation()">提交推荐</button>
      </div>
    </div>
  </div>
</div>

<!-- 意见反馈模态框 -->
<div class="modal fade" id="feedbackModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">提交意见建议</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="feedbackForm">
          <div class="form-group">
            <label for="feedbackType">反馈类型 <span class="text-danger">*</span></label>
            <select class="form-control" id="feedbackType" required>
              <option value="">请选择反馈类型</option>
              <option value="SERVICE">服务质量</option>
              <option value="FACILITY">设施环境</option>
              <option value="RESOURCE">资源建设</option>
              <option value="SYSTEM">系统功能</option>
              <option value="OTHER">其他建议</option>
            </select>
          </div>
          <div class="form-group">
            <label for="feedbackTitle">反馈标题 <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="feedbackTitle" required>
          </div>
          <div class="form-group">
            <label for="feedbackContent">详细描述 <span class="text-danger">*</span></label>
            <textarea class="form-control" id="feedbackContent" rows="5" placeholder="请详细描述您的意见建议" required></textarea>
          </div>
          <div class="form-group">
            <label for="expectedTime">期望处理时间</label>
            <input type="date" class="form-control" id="expectedTime">
          </div>
          <div class="form-group">
            <label for="attachments">相关附件</label>
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="attachments" multiple accept="image/*,.pdf,.doc,.docx">
              <label class="custom-file-label" for="attachments">选择文件...</label>
            </div>
            <small class="form-text text-muted">支持上传图片、PDF、Word文档，单个文件不超过5MB</small>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="submitFeedback()">提交反馈</button>
      </div>
    </div>
  </div>
</div>

[#include 'inc_footer.html'/]
<script>
// 模拟的静态数据
const recommendData = {
  recommendations: [
    {
      id: 1,
      title: "深度学习",
      author: "Ian Goodfellow",
      publisher: "人民邮电出版社",
      isbn: "9787115461476",
      category: "计算机科学",
      reason: "这本书是深度学习领域的经典教材，对我的人工智能研究很有帮助",
      recommendDate: "2024-04-15",
      status: "APPROVED",
      statusText: "已采纳"
    },
    {
      id: 2,
      title: "算法导论",
      author: "Thomas H. Cormen",
      publisher: "机械工业出版社",
      isbn: "9787111407918",
      category: "计算机科学",
      reason: "经典算法教材，适合计算机专业学生深入学习",
      recommendDate: "2024-04-10",
      status: "PURCHASED",
      statusText: "已采购"
    },
    {
      id: 3,
      title: "机器学习实战",
      author: "Peter Harrington",
      publisher: "清华大学出版社",
      isbn: "",
      category: "计算机科学",
      reason: "实战类书籍，理论与实践相结合",
      recommendDate: "2024-04-08",
      status: "PENDING",
      statusText: "审核中"
    }
  ],
  feedback: [
    {
      id: 1,
      type: "SERVICE",
      typeText: "服务质量",
      title: "借阅流程建议",
      content: "建议增加自助续借设备，减少排队时间",
      submitDate: "2024-04-14",
      status: "RESOLVED",
      statusText: "已解决"
    },
    {
      id: 2,
      type: "FACILITY",
      typeText: "设施环境",
      title: "阅览室温度问题",
      content: "三楼阅览室空调效果不佳，夏天温度偏高",
      submitDate: "2024-04-12",
      status: "PROCESSING",
      statusText: "处理中"
    }
  ],
  consultations: [
    {
      id: 1,
      type: "TEXT",
      question: "请问续借的图书在哪里可以自助办理？",
      answer: "您可以在各楼层的自助借还机上进行续借操作，也可以通过图书馆网站或APP在线续借。",
      consultDate: "2024-04-15 14:30",
      duration: "5分钟"
    },
    {
      id: 2,
      type: "PHONE",
      question: "关于开馆时间咨询",
      answer: "图书馆开放时间为周一至周日 8:00-22:30，节假日另行通知。",
      consultDate: "2024-04-14 10:15",
      duration: "3分钟"
    }
  ]
};

// 渲染荐购列表
function renderRecommendList() {
  const tbody = document.getElementById('recommendList');
  tbody.innerHTML = '';

  recommendData.recommendations.forEach(item => {
    const row = document.createElement('tr');
    row.innerHTML =
      '<td>' +
        '<div>' +
          '<strong>' + item.title + '</strong><br>' +
          '<small class="text-muted">' + item.author + ' | ' + item.publisher + '</small>' +
        '</div>' +
      '</td>' +
      '<td><small>' + item.recommendDate + '</small></td>' +
      '<td>' +
        '<span class="badge badge-' + getStatusClass(item.status) + '">' + item.statusText + '</span>' +
      '</td>' +
      '<td>' +
        '<div class="progress" style="height: 6px;">' +
          '<div class="progress-bar bg-' + getProgressColor(item.status) + '" style="width: ' + getProgressWidth(item.status) + '%"></div>' +
        '</div>' +
      '</td>' +
      '<td>' +
        '<div class="btn-group btn-group-sm">' +
          '<button type="button" class="btn btn-outline-info" onclick="viewRecommendDetail(' + item.id + ')">详情</button>' +
          (item.status === 'PENDING' ? '<button type="button" class="btn btn-outline-warning" onclick="cancelRecommend(' + item.id + ')">取消</button>' : '') +
        '</div>' +
      '</td>';
    tbody.appendChild(row);
  });
}

// 渲染反馈列表
function renderFeedbackList() {
  const container = document.getElementById('feedbackList');
  container.innerHTML = '';

  recommendData.feedback.forEach(item => {
    const div = document.createElement('div');
    div.className = 'list-group-item';
    div.innerHTML =
      '<div class="d-flex justify-content-between align-items-start">' +
        '<div>' +
          '<h6 class="mb-1">' + item.title + '</h6>' +
          '<small class="text-muted">' + item.typeText + ' | ' + item.submitDate + '</small>' +
          '<p class="mb-1">' + item.content + '</p>' +
        '</div>' +
        '<span class="badge badge-' + getStatusClass(item.status) + '">' + item.statusText + '</span>' +
      '</div>';
    container.appendChild(div);
  });
}

// 渲染咨询记录
function renderConsultationList() {
  const container = document.getElementById('consultationList');
  container.innerHTML = '';

  recommendData.consultations.forEach(item => {
    const div = document.createElement('div');
    div.className = 'list-group-item';
    div.innerHTML =
      '<div class="d-flex justify-content-between align-items-start">' +
        '<div>' +
          '<div class="mb-1">' +
            '<span class="badge badge-' + (item.type === 'TEXT' ? 'info' : 'success') + '">' + (item.type === 'TEXT' ? '文字咨询' : '电话咨询') + '</span>' +
            '<small class="text-muted ml-2">' + item.consultDate + '</small>' +
          '</div>' +
          '<p class="mb-1"><strong>问：</strong>' + item.question + '</p>' +
          '<p><strong>答：</strong>' + item.answer + '</p>' +
        '</div>' +
        '<small class="text-muted">时长：' + item.duration + '</small>' +
      '</div>' +
      '</div>';
    container.appendChild(div);
  });
}

// 获取状态样式
function getStatusClass(status) {
  const statusMap = {
    'PENDING': 'warning',
    'APPROVED': 'info',
    'PURCHASED': 'primary',
    'ARRIVED': 'success',
    'RESOLVED': 'success',
    'PROCESSING': 'warning',
    'REJECTED': 'danger'
  };
  return statusMap[status] || 'secondary';
}

function getProgressColor(status) {
  const progressMap = {
    'PENDING': 'warning',
    'APPROVED': 'info',
    'PURCHASED': 'primary',
    'ARRIVED': 'success'
  };
  return progressMap[status] || 'secondary';
}

function getProgressWidth(status) {
  const widthMap = {
    'PENDING': 25,
    'APPROVED': 50,
    'PURCHASED': 75,
    'ARRIVED': 100
  };
  return widthMap[status] || 0;
}

// 功能函数
function showRecommendModal() {
  $('#recommendModal').modal('show');
}

function showFeedbackModal() {
  $('#feedbackModal').modal('show');
}

function submitRecommendation() {
  const form = document.getElementById('recommendForm');
  if (form.checkValidity()) {
    alert('图书推荐提交成功！我们会尽快处理您的推荐。');
    $('#recommendModal').modal('hide');
    form.reset();
  } else {
    alert('请填写完整的推荐信息！');
  }
}

function submitFeedback() {
  const form = document.getElementById('feedbackForm');
  if (form.checkValidity()) {
    alert('意见建议提交成功！我们会认真处理您的反馈。');
    $('#feedbackModal').modal('hide');
    form.reset();
  } else {
    alert('请填写完整的反馈信息！');
  }
}

function viewRecommendDetail(id) {
  alert('查看推荐详情ID: ' + id);
}

function cancelRecommend(id) {
  if (confirm('确定要取消这条推荐吗？')) {
    alert('已取消推荐ID: ' + id);
  }
}

function startConsultation() {
  alert('跳转到在线咨询页面，开始与客服对话');
}

function showAllActivities() {
  alert('跳转到完整的活动列表页面');
}

function askQuestion() {
  const question = document.getElementById('questionInput').value;
  if (question.trim()) {
    alert('您的问题："' + question + '"已提交，智能客服正在回答中...');
    document.getElementById('questionInput').value = '';
  } else {
    alert('请输入您的问题');
  }
}

// 页面初始化
document.addEventListener('DOMContentLoaded', function() {
  renderRecommendList();
  renderFeedbackList();
  renderConsultationList();
});

// API调用统计
axios.get('${api}/channel/view/${channel.id?c}');
</script>

</body>
</html>
[/#escape]
